<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常见问题库管理系统v1.0</title>

</head>
<body>
    <div class="wrap">
        <h1>常见问题检索</h1>
        <div class="search-box">
            <label for="keyword">请输入查询关键字：</label>
            <input type="text" id="keyword" name="keyword">
            <input type="button" id="find" value="查询"><a href="addFaq.html">添加常见问题</a>
        </div>
        <div class="tips">
            <h2>检索结果</h2>
        </div>
        <div class="result">
            <table border="1">
                <tr>
                    <th>编号</th>
                    <th>标题</th>
                    <th>分类</th>
                    <th>创建时间</th>
                </tr>
                <tbody id="content">

                </tbody>
            </table>
        </div>
    </div>

<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>

<script>
    $(function () {
       loadData(null);


       $('#find').click(function () {
           let keyword = $('#keyword').val();
           loadData(keyword);
       });
    });



    function loadData(keyword) {
        let baseUrl = "http://localhost:8081/api/faq";
        $.ajax({
            type:'get',
            url:baseUrl + '/query',
            data:{"keyword":keyword},
            dataType:'json',
            success:function (result) {
                console.log(result);
                let data = result.data;
                let html = ``;
                if(data.length > 0){
                    $.each(data,function (index,faq) {
                        html += `<tr>
                            <td>${faq.id}</td>
                            <td>
                                <a href="detail.html?id=${faq.id}" target="_blank">${faq.title}</a>
                            </td>
                            <td>${faq.clazz.cname}</td>
                            <td>${faq.createDate}</td>
                        </tr>`;
                    });
                }
                else{
                    html += `<tr>
                            <td colspan="4">没有找到和”${keyword}“相关的内容，请修改关键字后重试</td>
                        </tr>`;

                }

                $('#content').html(html);
            }
        });
    }
</script>
</body>
</html>